<template>

  <div :style="data.s">
    <router-link to="Test">jumping to Test.vue</router-link>
  </div>

  <div>
    <el-button type="primary" @click="router.push('/Manager/Test')">push-to-new-website</el-button>
    <el-button type="primary" @click="router.replace('/Manager/Test')">test</el-button>
    <el-button type="primary" @click="router.push('/Manager/Test?id=2&name1=小行星')">路由传参id=2&name1=小行星
    </el-button>
  </div>


  <div :style="data.s">
    <el-input v-model="data.input" style="width: 200px" placeholder="Please input" clearable prefix-icon="Search"/>
    <el-input v-model="data.desc" type="textarea" style="width: 300px " placeholder="Please input"/>
    <el-input v-model="data.input3" style="width: 200px" class="w-50 m-2" placeholder="Pick a date"
              suffix-icon="Calendar"/>

  </div>


  <div :style="data.s">
    <el-select
        clearable
        multiple
        v-model="data.value"
        value-key="id"
        class="m-2"
        placeholder="Please Select"
        style="width: 240px"
    >
      <el-option
          v-for="item in data.options"
          :key="item.id"
          :label="item.lable"
          :value="item.name"
      />
    </el-select>
    {{ data.value }}

    <div :style="data.s">
      <el-radio-group v-model="data.sex">
        <el-radio size="large" value="男">男</el-radio>
        <el-radio size="large" value="女">女</el-radio>
      </el-radio-group>
      <span style="margin-left: 20px">{{ data.sex }}</span>

      <el-radio-group v-model="data.tag" size="large" style="margin-left: 50px">
        <el-radio-button label="我点赞的内容" value="1"/>
        <el-radio-button label="我发布的内容" value="2"/>
        <el-radio-button label="我评论的内容" value="3 "/>

      </el-radio-group>

      <div>
        <el-checkbox-group v-model="data.checkList">
          <el-checkbox v-for="item in data.options" :key="item.id"
                       :label="item.lable"
                       :value="item.name"/>

        </el-checkbox-group>
      </div>

      <div :style="data.s">
        <img src="@/assets/logo.svg" alt="" style="width: 100px">
        <el-image :src="img" alt="" style="width: 100px"
                  :preview-src-list="[img,'https://img2.baidu.com/it/u=1511634168,936845908&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083']"></el-image>
      </div>
    </div>

    <div class="block text-center" :style="data.s">
      <el-carousel height="300px" style="width: 300px">
        <el-carousel-item v-for="item in data.imgs" :key="item" style="width: 300px">
          <img style="width: auto" :src="item" height="300px"></img>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div :style="data.s">
      <el-date-picker
          v-model="data.date"
          type="datetime"
          placeholder="Select date and time"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
      />
      {{ data.date }}
    </div>

    <div :style="data.s">
      <el-date-picker
          v-model="data.time"
          type="datetime"
          placeholder="Select time"
          format=" HH:mm:ss"
          value-format="HH:mm:ss"
      />
      {{ data.time }}
    </div>
    <div :style="data.s">
      <el-date-picker
          v-model="data.date1"
          type="datetime"
          placeholder="Select date"
          format=" YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />
      {{ data.date1 }}
    </div>

    <div :style="data.s">
      <el-date-picker
          v-model="data.double"
          type="daterange"
          range-separator="到"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format=" YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />
      {{ data.double?.length ? data.double[0] : '' }} {{ data.double?.length ? data.double[1] : '' }}
    </div>

    <div :style="data.s">
      <el-table :data="data.tableData" style="width: 100%" stripe border>
        <el-table-column prop="date" label="时间" width="180"/>
        <el-table-column prop="name" label="名字" width="180"/>
        <el-table-column prop="address" label="地址" width="180"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="danger" @click="del(scope.row)">
              <el-icon>
                <Delete></Delete>
              </el-icon>
            </el-button>

            <el-button type="primary" @click="edit(scope.row)">
              <el-icon>
                <Edit>
                  <edit></edit>
                </Edit>
              </el-icon>
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <div>
        <el-pagination
            v-model:current-page="data.currentPage"
            v-model:page-size="data.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="12"
        />
      </div>
    </div>

    <el-dialog v-model="data.dialogTableVisible" title="编辑">
      <div style="padding: 10px">
        <div>日期：{{ data.row.date }}</div>
        <div>名字：{{ data.row.name }}</div>
        <div>地址：{{ data.row.address }}</div>
      </div>
    </el-dialog>

  </div>
</template>


<script setup>
import {reactive} from 'vue'
import {Delete, Edit, Search} from "@element-plus/icons-vue";
import img from '@/assets/logo.svg'
import img1 from '@/assets/蜡笔小新1.png'
import img2 from '@/assets/蜡笔小新2.png'
import img3 from '@/assets/蜡笔小新3.png'
import router from "@/router";
import request from "@/utils/request";


const data = reactive({

  row: null,
  input: null,
  input3: null,
  desc: 'sssssssssssssssssss' +
      'ssssssssssssssssssssssssssss' +
      'sssssssssssssssssssssssssssssssssssssssssssssssssssssssssss',
  s: {
    marginBottom: '20px',
  },
  value: "",
  options: [{id: 1, lable: '苹果', name: '苹果1'}, {id: 2, lable: '黄桃', name: '黄桃'},
    {id: 3, lable: '黑凤梨', name: '黑凤梨'}, {id: 4, lable: '苹果', name: '苹果2'}],

  sex: '男',
  tag: "2",
  checkList: [],
  imgs: [img1, img2, img3],
  date: '',
  date1: '',
  time: '',
  double: '',
  currentPage: 1,
  pageSize: 5,
  tableData: [
    {id: 1, date: '2020-12-21', name: '流逝', address: '重庆'},
    {id: 2, date: '2020-12-21', name: '流逝', address: '重庆'},
    {id: 3, date: '2020-12-21', name: '流逝', address: '重庆'},
    {id: 4, date: '2020-12-21', name: '流逝', address: '重庆'},
    {id: 5, date: '2020-12-21', name: '流逝', address: '重庆'},
    {id: 6, date: '2020-12-21', name: '流逝', address: '重庆'},
    {id: 7, date: '2020-12-21', name: '流逝', address: '重庆'},
    {id: 8, date: '2020-12-21', name: '流逝', address: '重庆'},
    {id: 9, date: '2020-12-21', name: '流逝', address: '重庆'},

  ],
  dialogTableVisible: false,
  userList: [],
})

request.get('/user/selectAll').then(res => {
  console.log(res)
  data.userList = res.data
  console.log(data.userList)
})


const del = reactive({})

const edit = (row) => {
  data.row = row
  data.dialogTableVisible = true
}

data.tableData = data.tableData.splice(0, 5)
</script>